import 'package:flutter/material.dart';
import 'package:aweb5/base/BaseWidget.dart';

class Coupon extends BaseWidget {
  @override
  State<Coupon> createState() => CouponState();
}

class CouponState extends BaseWidgetState<Coupon> {
  PageController pageController = PageController();
  double x = 0;
  int currentIndex = 0;
  @override
  void initState() {
    super.initState();

    pageController.addListener(() {
      print(pageController.offset);
      x = pageController.offset / 2;

      print('x>>>${x}');
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    init(context);
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: appBarWithBack("优惠券"),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Divider(height: 1,color: Color(0xfffafafa),),
          SizedBox(height: 10,),
          scroll(),
          Container(
            color: Colors.white,
            width: windowWidth,
            height: 10,
          ),
          Transform.translate(
            offset: Offset(x, 0),
            child: Container(
              height:1,
              width: windowWidth / 2,
              padding: EdgeInsets.only(left: 15, right: 15),
              child: Container(
                height:1,
                decoration: BoxDecoration(color: Color(0xffff8900)),
              ),
            ),
          ),
          Divider(height: 1,color: Color(0xffe9e9e9),),
          SizedBox(
            height: 21,
          ),
          Expanded(
            child: page(),
          ),
        ],
      ),
    );
  }

  Widget page() {
    return PageView.builder(
      itemBuilder: (con, ind) {
        return ListView.builder(
          itemBuilder: (con, ind) {
            return item();
          },
          itemCount: 5,
        );
      },
      itemCount: 2,
      controller: pageController,
      onPageChanged: (ind) {
        print(">>>>${ind}");
        currentIndex = ind;
        setState(() {});
      },
    );
  }

  Widget scroll() {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            InkWell(
              child: Container(
                color: Colors.white,
                width: windowWidth / 2,
                child: Text(
                  "可用优惠券",
                  style: text(0),
                  textAlign: TextAlign.center,
                ),
              ),
              onTap: () {
                currentIndex == 0;
                pageController.animateToPage(0,
                    duration: Duration(milliseconds: 200),
                    curve: Curves.fastOutSlowIn);
                setState(() {});
              },
            ),
            InkWell(
              child: Container(
                color: Colors.white,
                width: windowWidth / 2,
                child: Text(
                  "已失效",
                  style: text(1),
                  textAlign: TextAlign.center,
                ),
              ),
              onTap: () {
                currentIndex == 1;
                pageController.animateToPage(1,
                    duration: Duration(milliseconds: 200),
                    curve: Curves.fastOutSlowIn);
                setState(() {});
              },
            ),
          ],
        )
      ],
    );
  }

  TextStyle text(ind) {
    if (ind == currentIndex) {
      return TextStyle(color: Color(0xffff8900), fontSize: 13);
    } else {
      return TextStyle(color: Color(0xff2d2d2d), fontSize: 13);
    }
  }

  Widget item() {
    return Column(
      children: <Widget>[
        Container(
          color: Colors.white,
          height: 10,
        ),
        Container(
          height: 120,
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage("assets/couponnotused.png"),
                  fit: BoxFit.fill)),
          margin: EdgeInsets.only(left: 10, right: 10),
          child: Row(
            children: <Widget>[
              Expanded(
                child: Text(""),
                flex: 34,
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "满100减50",
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                    Text(
                      "满减",
                      style: TextStyle(color: Colors.white, fontSize: 14),
                    ),
                    Text(
                      "订单满2000元",
                      style: TextStyle(color: Colors.white, fontSize: 10),
                    ),
                    Text(
                      "2017.12.23 15:20:10-2018.2.15 17:30:10",
                      style: TextStyle(color: Colors.white, fontSize: 9),
                    ),
                  ],
                ),
                flex: 186,
              ),
              Expanded(
                child: Text(""),
                flex: 10,
              ),
              Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        "¥50",
                        style: TextStyle(color: Colors.white, fontSize: 36),
                      ),
                      SizedBox(
                        height: 12,
                      ),
                      Container(

                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(12)),
                        padding: EdgeInsets.only(
                            left: 10, right: 10, top: 3, bottom: 3),
                        
                        child: Text("已领取",style: TextStyle(color: Color(0xffff6200),fontSize: 14),),
                      )
                    ],
                  ),
                  flex: 115)
            ],
          ),
        ),
        Container(
          color: Colors.white,
          height: 10,
        )
      ],
    );
  }
}
